<template>
  <div>
    <h1 style="font-size:18px;">Checkbox 多选框</h1>
    <p>一组备选项中进行多选</p>
    <h2 style="font-size:14px;">基础用法</h2>
    <div class="testCheckBox">
      <Checkbox v-model="single">备选项</Checkbox>
      <span>{{this.single}}</span>
    </div>
    <p>通过点击 <code>Checkbox</code> 组件来改变选中状态，组件内部使用 <code>v-model</code> 绑定。<code>v-model</code> 值为 <code>true</code> 时，为选中状态。值为 <code>false</code> 时，为未选中状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Checkbox v-model=&quot;single&quot;&gt;备选项&lt;/Checkbox&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            single: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">禁用状态</h2>
    <div class="testCheckBox">
      <Checkbox v-model="checked1" disabled>备选项1</Checkbox>
      <Checkbox v-model="checked2" disabled>备选项2</Checkbox>
    </div>
    <p>通过在 <code>Checkbox</code> 组件上设置 <code>disabled</code> 属性即可。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Checkbox v-model=&quot;checked1&quot; disabled&gt;备选项1&lt;/Checkbox&gt;
        &lt;Checkbox v-model=&quot;checked2&quot; disabled&gt;备选项2&lt;/Checkbox&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            checked1: false,
            checked2: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">多选框组</h2>
    <div class="testCheckBox">
      <CheckboxGroup v-model="checkAllGroup1">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
        <span>{{this.checkAllGroup1}}</span>
      </CheckboxGroup>
    </div>
    <p> <code>CheckboxGroup</code> 组件能把多个 <code>Checkbox</code> 成员管理为一组，只需要在 <code>CheckboxGroup</code> 中使用 <code>v-model</code> 绑定 <code>Array</code> 类型的变量即可。</p>
    <p> <code>Checkbox</code> 组件的 <code>label</code> 属性是该 <code>Checkbox</code> 组件对应的值，若该标签中无内容，则该属性也充当 <code>Checkbox</code> 按钮后的介绍。<code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;CheckboxGroup v-model=&quot;checkAllGroup&quot;&gt;
          &lt;Checkbox label=&quot;香蕉&quot;&gt;&lt;/Checkbox&gt;
          &lt;Checkbox label=&quot;苹果&quot;&gt;&lt;/Checkbox&gt;
          &lt;Checkbox label=&quot;西瓜&quot;&gt;&lt;/Checkbox&gt;
        &lt;/CheckboxGroup&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            checkAllGroup: ['香蕉']
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">全选</h2>
    <br>
    <div class="ti">
      <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
      <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
        <span>{{this.checkAllGroup}}</span>
      </CheckboxGroup>
    </div>
    <p>在实现全选效果时，需要用到 <code>indeterminate</code> 属性。示例代码只是一种写法，业务中可以用更多的方法，比如计算属性。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Checkbox :indeterminate=&quot;indeterminate&quot; :value=&quot;checkAll&quot; @click.prevent.native=&quot;handleCheckAll&quot;&gt;全选&lt;/Checkbox&gt;
        &lt;CheckboxGroup v-model=&quot;checkAllGroup&quot; @on-change=&quot;checkAllGroupChange&quot;&gt;
          &lt;Checkbox label=&quot;香蕉&quot;&gt;&lt;/Checkbox&gt;
          &lt;Checkbox label=&quot;苹果&quot;&gt;&lt;/Checkbox&gt;
          &lt;Checkbox label=&quot;西瓜&quot;&gt;&lt;/Checkbox&gt;
        &lt;/CheckboxGroup&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            indeterminate: true,
            checkAll: false,
            checkAllGroup: ['香蕉','苹果']
          }
        },
        methods: {
          handleCheckAll () {
            if (this.indeterminate) {
              this.checkAll = false
            } else {
              this.checkAll = !this.checkAll
            }
            this.indeterminate = false

            if (this.checkAll) {
              this.checkAllGroup = ['香蕉', '苹果', '西瓜']
            } else {
              this.checkAllGroup = []
            }
          },
          checkAllGroupChange (data) {
            if (data.length === 3) {
              this.indeterminate = false
              this.checkAll = true
            } else if (data.length > 0) {
              this.indeterminate = true
              this.checkAll = false
            } else {
              this.indeterminate = false
              this.checkAll = false
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">API</h2>
    <p>Checkbox props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>CheckboxGroup props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <br>
    <p>Checkbox events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
    <br>
    <p>CheckboxGroup events</p>
    <Table :columns="tableColumn1" :data="tableData3"></Table>
  </div>
</template>

<script>
export default {
  name: 'TestCheckbox',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: '是否选中',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'trueValue',
          explain: '选中值',
          type: 'String | Number | Boolen',
          default: 'true'
        },
        {
          attribute: 'falseValue',
          explain: '未选中值',
          type: 'String | Number | Boolen',
          default: 'false'
        },
        {
          attribute: 'label',
          explain: '使用CheckboxGroup时有效，类似form表单label',
          type: 'String | Number | Boolen',
          default: '-'
        },
        {
          attribute: 'indeterminate',
          explain: '半选状态',
          type: 'Boolen',
          default: 'false'
        }
      ],
      tableData1: [
        {
          attribute: 'v-model',
          explain: '指定选中项目的集合',
          type: 'Array',
          default: '[ ]'
        }
      ],
      tableData2: [
        {
          event: 'on-change',
          type: '选中状态变化',
          callback: 'params: [boolen: true、false]'
        }
      ],
      tableData3: [
        {
          event: 'on-change',
          type: '选中状态变化(CheckboxGroup)',
          callback: 'params: [array: 已选中值]'
        }
      ],
      checked1: false,
      checked2: true,
      single: true,
      indeterminate: true,
      checkAll: false,
      checkAllGroup: ['香蕉', '苹果'],
      checkAllGroup1: ['香蕉']
    }
  },
  methods: {
    handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.checkAllGroup = ['香蕉', '苹果', '西瓜']
      } else {
        this.checkAllGroup = []
      }
    },
    checkAllGroupChange (data) {
      if (data.length === 3) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    }
  }
}
</script>
<style scoped lang="less">
.testCheckBox {
  width: 500px;
  height: 50px;
  display:flex;
  align-items: center;
}
.ti {
  width: 500px;
  height: 50px;
  display: block;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
p {
  padding: 10px 0;
}
</style>
